<template>
  <div id="publicHeaderCSS">
    <div class="head_box" :style="{background:classbg}">
      <div class="up_box">
        <p class="up_p">E-Sharing运营管理平台</p>
        <div class="up_right">
          <p class="nameText">姓名:{{name}}</p>
          <div class="tuichuBtn" @click="outLogin">
            <p class="flash-icon f-icon-tuichu iconText"></p>
            <p>退出</p>
          </div>        
        </div>
      </div>
      <div class="lower_box">
        <div class="item_box" 
             v-for="(item,id) in listArr" 
             :key="id"
             @click="buttonFn(item)">
          <el-button type="primary" :style="{background:item.bg}">{{item.name}}</el-button>
        </div>
      </div>
    </div>
    <div class="tab_box">
           <div class="item_box" 
           v-for="(item,index) in tabList"  :key="index" 
           :style="{background:item.path==currentPath?classbg:''}"
           @click="tabFn(item.path)">
        <p  class="item_bg" :style="{color:item.path==currentPath?'white':''}" >{{item.admin}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import {mapActions} from "vuex"
import * as pubApi from '@api/public'
import message from "@api/common/message"
export default {
  components: {
  },
  data() {
    return {
      classbg:'',
      name:localStorage.getItem('userName'),
      listArr:[
        {name:'设备管理',
        bg:'#358FFE',
        parentPath:"/platform/equipment",
        path:"/platform/equipment/supplier",
        id: "118459990619983873",
        tab:[
        {admin:'供应商管理',path:"/platform/equipment/supplier",id: "118459990619983874"},
        {admin:'设备品类管理',path:"/platform/equipment/equipmenter",id: "118459990619983875"},
        {admin:'通信模块管理',path:"/platform/equipment/signal",id: "118459990619983876"},
        {admin:'终端设备管理',path:"/platform/equipment/terminal",id: "118459990619983877"},
        {admin:'库存管理',path:"/platform/equipment/stock",id: "118459990619983878"}
        ]
        },
        {name:'门店管理',
        bg:'#B982EA',
        parentPath:"/platform/shop",
        path:"/platform/shop/shoper",
        id: "118459990619983879",
        tab:[
          {admin:'门店管理',path:"/platform/shop/shoper",id: "118459990619983880"},
        {admin:'区域管理',path:"/platform/shop/region",id: "118459990619983881"},
        ]},


        {name:'运营管理',
        parentPath:"/platform/operate",
        bg:'#FFA726',
        path:"/platform/operate/price",
        id: "118459990619983882",
        tab:[
          {admin:'定价管理',path:"/platform/operate/price",id: "118459990619983883"},
          {admin:'服务项目管理',path:"/platform/operate/service",id: "118459990619983884"},
          {admin:'优惠卷管理',path:"/platform/operate/coupon",id: "118459990619983885"},
          {admin:'设备故障管理',path:"/platform/operate/fault"},
          {admin:'建议反馈管理',path:"/platform/operate/proposal"},
        ]},


        {name:'APP管理',
        parentPath:"/platform/banner",
        bg:'#6CC4DE',
        path:"/platform/banner/banners",
        id: "118459990619983886",
        tab:[
          {admin:'banner管理',path:"/platform/banner/banners",id: "118459990619983887"},
          {admin:'更新管理',path:"/platform/banner/updata"},
        ]},


        {name:'订单管理',
        parentPath:"/platform/order",
        bg:'#62B063',
        path:"/platform/order/orders",
        id: "118459990619983888",
        tab:[
          {admin:'订单管理',path:"/platform/order/orders",id: "118459990619983889"},
        ]},

        {name:'财务管理',
        bg:'#A3C87B',
        parentPath:"/platform/finance",
        path:"/platform/finance/pay_order",
        id: "118459990619983891",
        tab:[
          {admin:'支付订单管理',path:"/platform/finance/pay_order",id: "118459990619983892"},
          {admin:'退款管理',path:"/platform/finance/refund",id: "118459990619983893"}
        ]},


        {name:'用户管理',
        bg:'#90C5F7',
        parentPath:"/platform/userControl",
        path:"/platform/userControl/userList",
        pid: "111938604703420422",
        id: "118459990619983894",
        tab:[
        {admin:'用户列表',path:"/platform/userControl/userList",id: "118459990619983895"},
        ]
        },


        {name:'系统管理',
        parentPath:"/platform/system",
        bg:'#A7A7A7',
        path:"/platform/system/account",
        id: "118459990619983896",
        tab:[
        {admin:'账号管理',path:"/platform/system/account",id: "118459990619983897"},
        {admin:'角色管理',path:"/platform/system/character",id: "118459990619983898"},
        {admin:'系统配置',path:"/platform/system/sysConfig",id: "118459990619983899"},
        {admin:'修改密码',path:"/platform/system/changepassword"},
        ]
        },
      ],
      tabList:[],
      currentPath:null, //当前页面路由,
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {

  },
  // 监控data中的数据变化
  watch: {
    

 },
  methods: {
    outLogin(){//退出登录
        // 这里写清除token的代码
        pubApi.removeCookie("uKey")
        pubApi.removeCookie("uTicket")
        localStorage.removeItem("Rootarray")
        message.message.openWarning("您已退出登录，请重新登录！",'warning')
        this.$router.push({path:"/login"});
                  
    },
    buttonFn(item){
        this.classbg = item.bg
        this.$router.push({path:item.path})  
        this.getTabArray(item.parentPath,item.path)   
    },
    tabFn(path){
         this.$router.push({path:path})
         this.currentPath=path
    },
    getTabArray(parentPath,currentPath){               //根据二级路由parentPath 
      for(let i in this.listArr){
           if(this.listArr[i].parentPath.indexOf(parentPath)!=-1){     //如果当前路由是path路由下面的子路由,则动态匹配这个路由的信息
             let curTab=this.listArr[i]
             this.classbg = curTab.bg;   //当前背景颜色样式
             this.tabList = curTab.tab;  //当前tab栏目
             if(currentPath!=undefined) this.currentPath=currentPath             //传入了当前路由path就用,没有传入就用默认的$router自带
             else                       this.currentPath=this.$router.currentRoute.path

             return

           }
      }
    }
  },
  created() {
      let roterArray=this.$route.matched        //当前页面的路由栈
      for(let item in roterArray){
        if(roterArray[item].path=="/platform/equipment" 
                               || "/platform/userControl" || "/platform/system"
        ){
                            this.getTabArray(roterArray[item].path)
                            return
        }
      }
  },
  mounted() {


  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less'>
  @import "../../styles/less/public.less";
 #publicHeaderCSS{
   .el-button{
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
   }  
 }
 .tuichuBtn{
   display: flex;
   flex-direction: row;
   align-items: center;
   cursor:pointer;
 }
 .nameText{
   margin-right: 10px;
 }
 .iconText{
   margin-right: 5px;
 }
 .el-button--primary{
    border:none;
 }
  .head_box{
    width: 100%;
    height: 100px;
    background-color: #358FFE;
  }
  .up_box{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      p{
        color: rgba(255, 255, 255, 1);
        font-size: 20px;
      }
      .up_p{
        margin-top: 8px;
        margin-left: 14px;
      }
      .up_right{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-right: 19px;
        margin-top: 8px;
      }
    }
    .lower_box{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: @contentWidth;
      margin: 0 auto;
      margin-top:15px;
      .item_box{
        // width: 10%;
        height: 40px;
        font-size: 20px;
        color: #ffffff;
        border-radius: 10px;
        line-height: 40px;
        .el-button{
          width: 130px;
          border-radius: 10px;
          font-size: 18px;
        }
      }
    }
    .txt_color{
      color: #ffffff;
    }
     .tab_box{
    display :flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: @contentWidth;
    border-bottom: 1px solid #000000;
    height: 50px;
    margin : 0 auto;
    margin-top: 17px;
    .item_box{
      width: 11.719%;
      height: 50px;
      p{
       font-size: 18px;
       line-height: 50px;
      }
    }
  }
  .item_bg{
    color: #555555;
    cursor: pointer;
  }
</style>